<!--<template>-->
<!--  <div class="permission-management-container">-->
<!--    <div class="filter-container">-->
<!--      <el-input-->
<!--          v-model="listQuery.name"-->
<!--          placeholder="权限名称"-->
<!--          style="width: 200px;"-->
<!--          class="filter-item"-->
<!--          @keyup.enter.native="handleFilter"-->
<!--      />-->
<!--      <el-select-->
<!--          v-model="listQuery.type"-->
<!--          placeholder="权限类型"-->
<!--          clearable-->
<!--          style="width: 120px"-->
<!--          class="filter-item"-->
<!--      >-->
<!--        <el-option-->
<!--            v-for="item in typeOptions"-->
<!--            :key="item.value"-->
<!--            :label="item.label"-->
<!--            :value="item.value"-->
<!--        />-->
<!--      </el-select>-->
<!--      <el-button-->
<!--          class="filter-item"-->
<!--          type="primary"-->
<!--          icon="el-icon-search"-->
<!--          @click="handleFilter"-->
<!--      >-->
<!--        搜索-->
<!--      </el-button>-->
<!--      <el-button-->
<!--          class="filter-item"-->
<!--          type="primary"-->
<!--          icon="el-icon-plus"-->
<!--          @click="handleCreate"-->
<!--      >-->
<!--        新增权限-->
<!--      </el-button>-->
<!--    </div>-->

<!--    <el-table-->
<!--        v-loading="listLoading"-->
<!--        :data="list"-->
<!--        border-->
<!--        fit-->
<!--        highlight-current-row-->
<!--        style="width: 100%;"-->
<!--        row-key="id"-->
<!--        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"-->
<!--    >-->
<!--      <el-table-column label="权限名称" align="left" min-width="200">-->
<!--        <template slot-scope="{row}">-->
<!--          <span>{{ row.name }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="权限标识" align="center" width="150">-->
<!--        <template slot-scope="{row}">-->
<!--          <span>{{ row.code }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="类型" align="center" width="100">-->
<!--        <template slot-scope="{row}">-->
<!--          <el-tag :type="row.type | typeFilter">-->
<!--            {{ row.type | typeTextFilter }}-->
<!--          </el-tag>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="路径" align="center" width="180">-->
<!--        <template slot-scope="{row}">-->
<!--          <span>{{ row.path }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="排序" align="center" width="80">-->
<!--        <template slot-scope="{row}">-->
<!--          <span>{{ row.sort }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="状态" align="center" width="100">-->
<!--        <template slot-scope="{row}">-->
<!--          <el-tag :type="row.status | statusFilter">-->
<!--            {{ row.status | statusTextFilter }}-->
<!--          </el-tag>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">-->
<!--        <template slot-scope="{row}">-->
<!--          <el-button type="primary" size="mini" @click="handleUpdate(row)">-->
<!--            编辑-->
<!--          </el-button>-->
<!--          <el-button-->
<!--              v-if="row.status!='deleted'"-->
<!--              size="mini"-->
<!--              :type="row.status==='disabled'?'success':'danger'"-->
<!--              @click="handleModifyStatus(row,row.status==='disabled'?'enabled':'disabled')"-->
<!--          >-->
<!--            {{ row.status==='disabled'?'启用':'禁用' }}-->
<!--          </el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->

<!--    &lt;!&ndash; 新增/编辑对话框 &ndash;&gt;-->
<!--    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">-->
<!--      <el-form-->
<!--          ref="dataForm"-->
<!--          :rules="rules"-->
<!--          :model="temp"-->
<!--          label-position="left"-->
<!--          label-width="100px"-->
<!--          style="width: 400px; margin-left:50px;"-->
<!--      >-->
<!--        <el-form-item label="权限名称" prop="name">-->
<!--          <el-input v-model="temp.name" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="权限标识" prop="code">-->
<!--          <el-input v-model="temp.code" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="权限类型" prop="type">-->
<!--          <el-select v-model="temp.type" class="filter-item" placeholder="请选择">-->
<!--            <el-option-->
<!--                v-for="item in typeOptions"-->
<!--                :key="item.value"-->
<!--                :label="item.label"-->
<!--                :value="item.value"-->
<!--            />-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="上级权限" prop="parentId">-->
<!--          <el-cascader-->
<!--              v-model="temp.parentId"-->
<!--              :options="permissionOptions"-->
<!--              :props="{ checkStrictly: true, value: 'id', label: 'name', children: 'children', emitPath: false }"-->
<!--              clearable-->
<!--              style="width: 100%"-->
<!--          />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="路径" prop="path">-->
<!--          <el-input v-model="temp.path" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="排序" prop="sort">-->
<!--          <el-input-number v-model="temp.sort" :min="0" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="状态" prop="status">-->
<!--          <el-radio-group v-model="temp.status">-->
<!--            <el-radio label="enabled">启用</el-radio>-->
<!--            <el-radio label="disabled">禁用</el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="描述" prop="description">-->
<!--          <el-input v-model="temp.description" type="textarea" />-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button @click="dialogFormVisible = false">-->
<!--          取消-->
<!--        </el-button>-->
<!--        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">-->
<!--          确认-->
<!--        </el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import { fetchPermissionList, createPermission, updatePermission } from '@/api/permission'-->
<!--import { fetchPermissionTree } from '@/api/permission'-->

<!--export default {-->
<!--  name: 'PermissionManagement',-->
<!--  filters: {-->
<!--    typeFilter(type) {-->
<!--      const typeMap = {-->
<!--        menu: '',-->
<!--        button: 'success',-->
<!--        api: 'warning'-->
<!--      }-->
<!--      return typeMap[type]-->
<!--    },-->
<!--    typeTextFilter(type) {-->
<!--      const typeTextMap = {-->
<!--        menu: '菜单',-->
<!--        button: '按钮',-->
<!--        api: '接口'-->
<!--      }-->
<!--      return typeTextMap[type]-->
<!--    },-->
<!--    statusFilter(status) {-->
<!--      const statusMap = {-->
<!--        enabled: 'success',-->
<!--        disabled: 'danger',-->
<!--        deleted: 'info'-->
<!--      }-->
<!--      return statusMap[status]-->
<!--    },-->
<!--    statusTextFilter(status) {-->
<!--      const statusTextMap = {-->
<!--        enabled: '启用',-->
<!--        disabled: '禁用',-->
<!--        deleted: '删除'-->
<!--      }-->
<!--      return statusTextMap[status]-->
<!--    }-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      list: null,-->
<!--      listLoading: true,-->
<!--      listQuery: {-->
<!--        name: undefined,-->
<!--        type: undefined-->
<!--      },-->
<!--      typeOptions: [-->
<!--        { value: 'menu', label: '菜单' },-->
<!--        { value: 'button', label: '按钮' },-->
<!--        { value: 'api', label: '接口' }-->
<!--      ],-->
<!--      permissionOptions: [],-->
<!--      temp: {-->
<!--        id: undefined,-->
<!--        name: '',-->
<!--        code: '',-->
<!--        type: 'menu',-->
<!--        parentId: 0,-->
<!--        path: '',-->
<!--        sort: 0,-->
<!--        status: 'enabled',-->
<!--        description: ''-->
<!--      },-->
<!--      dialogFormVisible: false,-->
<!--      dialogStatus: '',-->
<!--      textMap: {-->
<!--        update: '编辑权限',-->
<!--        create: '新增权限'-->
<!--      },-->
<!--      rules: {-->
<!--        name: [{ required: true, message: '权限名称不能为空', trigger: 'blur' }],-->
<!--        code: [{ required: true, message: '权限标识不能为空', trigger: 'blur' }],-->
<!--        type: [{ required: true, message: '请选择权限类型', trigger: 'change' }]-->
<!--      }-->
<!--    }-->
<!--  },-->
<!--  created() {-->
<!--    this.getList()-->
<!--    this.getPermissionOptions()-->
<!--  },-->
<!--  methods: {-->
<!--    getList() {-->
<!--      this.listLoading = true-->
<!--      fetchPermissionTree().then(response => {-->
<!--        this.list = response.data-->
<!--        this.listLoading = false-->
<!--      })-->
<!--    },-->
<!--    getPermissionOptions() {-->
<!--      fetchPermissionTree().then(response => {-->
<!--        this.permissionOptions = response.data-->
<!--      })-->
<!--    },-->
<!--    handleFilter() {-->
<!--      this.getList()-->
<!--    },-->
<!--    resetTemp() {-->
<!--      this.temp = {-->
<!--        id: undefined,-->
<!--        name: '',-->
<!--        code: '',-->
<!--        type: 'menu',-->
<!--        parentId: 0,-->
<!--        path: '',-->
<!--        sort: 0,-->
<!--        status: 'enabled',-->
<!--        description: ''-->
<!--      }-->
<!--    },-->
<!--    handleCreate() {-->
<!--      this.resetTemp()-->
<!--      this.dialogStatus = 'create'-->
<!--      this.dialogFormVisible = true-->
<!--      this.$nextTick(() => {-->
<!--        this.$refs['dataForm'].clearValidate()-->
<!--      })-->
<!--    },-->
<!--    createData() {-->
<!--      this.$refs['dataForm'].validate((valid) => {-->
<!--        if (valid) {-->
<!--          createPermission(this.temp).then(() => {-->
<!--            this.dialogFormVisible = false-->
<!--            this.$notify({-->
<!--              title: '成功',-->
<!--              message: '创建成功',-->
<!--              type: 'success',-->
<!--              duration: 2000-->
<!--            })-->
<!--            this.getList()-->
<!--            this.getPermissionOptions()-->
<!--          })-->
<!--        }-->
<!--      })-->
<!--    },-->
<!--    handleUpdate(row) {-->
<!--      this.temp = Object.assign({}, row) // copy obj-->
<!--      this.dialogStatus = 'update'-->
<!--      this.dialogFormVisible = true-->
<!--      this.$nextTick(() => {-->
<!--        this.$refs['dataForm'].clearValidate()-->
<!--      })-->
<!--    },-->
<!--    updateData() {-->
<!--      this.$refs['dataForm'].validate((valid) => {-->
<!--        if (valid) {-->
<!--          const tempData = Object.assign({}, this.temp)-->
<!--          updatePermission(tempData).then(() => {-->
<!--            this.dialogFormVisible = false-->
<!--            this.$notify({-->
<!--              title: '成功',-->
<!--              message: '更新成功',-->
<!--              type: 'success',-->
<!--              duration: 2000-->
<!--            })-->
<!--            this.getList()-->
<!--            this.getPermissionOptions()-->
<!--          })-->
<!--        }-->
<!--      })-->
<!--    },-->
<!--    handleModifyStatus(row, status) {-->
<!--      this.$confirm('确认要' + (status === 'enabled' ? '启用' : '禁用') + '该权限吗?', '提示', {-->
<!--        confirmButtonText: '确定',-->
<!--        cancelButtonText: '取消',-->
<!--        type: 'warning'-->
<!--      }).then(() => {-->
<!--        const tempData = Object.assign({}, row)-->
<!--        tempData.status = status-->
<!--        updatePermission(tempData).then(() => {-->
<!--          this.$notify({-->
<!--            title: '成功',-->
<!--            message: '状态更新成功',-->
<!--            type: 'success',-->
<!--            duration: 2000-->
<!--          })-->
<!--          this.getList()-->
<!--        })-->
<!--      }).catch(() => {-->
<!--        this.$message({-->
<!--          type: 'info',-->
<!--          message: '已取消操作'-->
<!--        })-->
<!--      })-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->
<!--.filter-container {-->
<!--  margin-bottom: 20px;-->
<!--}-->
<!--.filter-item {-->
<!--  margin-right: 10px;-->
<!--}-->
<!--</style>-->

























<template>
  <div class="permission-management-container">
    <div class="filter-container">
      <el-input v-model="listQuery.name" placeholder="权限名称" style="width: 200px;" class="filter-item" />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleCreate">新增权限</el-button>
    </div>

    <el-table
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        row-key="id"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column label="权限名称" prop="name" width="200" />
      <el-table-column label="权限标识" prop="code" width="150" />
      <el-table-column label="权限类型" prop="type" width="100">
        <template slot-scope="{row}">
          <el-tag :type="row.type | typeFilter">{{ row.type | typeTextFilter }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="路径" prop="path" />
      <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="80px" style="width: 400px; margin-left:50px;">
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="temp.name" />
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="temp.code" />
        </el-form-item>
        <el-form-item label="权限类型" prop="type">
          <el-select v-model="temp.type" class="filter-item" placeholder="请选择">
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="路径" prop="path">
          <el-input v-model="temp.path" />
        </el-form-item>
        <el-form-item label="父级权限" prop="parentId">
          <el-cascader
              v-model="temp.parentId"
              :options="permissionOptions"
              :props="{ checkStrictly: true, value: 'id', label: 'name', children: 'children', emitPath: false }"
              clearable
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'PermissionManagement',
  filters: {
    typeFilter(type) {
      const typeMap = {
        menu: 'success',
        button: 'warning',
        api: 'info'
      }
      return typeMap[type]
    },
    typeTextFilter(type) {
      const typeTextMap = {
        menu: '菜单',
        button: '按钮',
        api: '接口'
      }
      return typeTextMap[type]
    }
  },
  data() {
    return {
      list: null,
      listQuery: {
        name: undefined
      },
      temp: {
        id: undefined,
        name: '',
        code: '',
        type: 'menu',
        path: '',
        parentId: null
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑权限',
        create: '新增权限'
      },
      rules: {
        name: [{ required: true, message: '权限名称不能为空', trigger: 'blur' }],
        code: [{ required: true, message: '权限标识不能为空', trigger: 'blur' }],
        type: [{ required: true, message: '权限类型不能为空', trigger: 'change' }]
      },
      typeOptions: [
        { value: 'menu', label: '菜单' },
        { value: 'button', label: '按钮' },
        { value: 'api', label: '接口' }
      ],
      permissionOptions: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      // 模拟API请求
      const mockData = [
        {
          id: 1,
          name: '系统管理',
          code: 'system',
          type: 'menu',
          path: '/system',
          children: [
            {
              id: 11,
              name: '用户管理',
              code: 'user',
              type: 'menu',
              path: '/user',
              children: [
                { id: 111, name: '用户列表', code: 'user:list', type: 'menu', path: '/user/list' },
                { id: 112, name: '新增用户', code: 'user:add', type: 'button', path: '' },
                { id: 113, name: '编辑用户', code: 'user:edit', type: 'button', path: '' }
              ]
            },
            {
              id: 12,
              name: '角色管理',
              code: 'role',
              type: 'menu',
              path: '/role',
              children: [
                { id: 121, name: '角色列表', code: 'role:list', type: 'menu', path: '/role/list' },
                { id: 122, name: '角色分配', code: 'role:assign', type: 'button', path: '' }
              ]
            }
          ]
        },
        {
          id: 2,
          name: '内容管理',
          code: 'content',
          type: 'menu',
          path: '/content',
          children: [
            { id: 21, name: '文章管理', code: 'article', type: 'menu', path: '/article' },
            { id: 22, name: '分类管理', code: 'category', type: 'menu', path: '/category' }
          ]
        }
      ]

      this.list = mockData
      this.permissionOptions = mockData
    },
    handleFilter() {
      // 模拟搜索
      this.getList()
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        name: '',
        code: '',
        type: 'menu',
        path: '',
        parentId: null
      }
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          // 模拟创建权限
          this.temp.id = parseInt(Math.random() * 1000) + 1000
          if (this.temp.parentId) {
            // 找到父级并添加到children
            this.addToParent(this.list, this.temp.parentId, this.temp)
          } else {
            this.list.push(this.temp)
          }
          this.dialogFormVisible = false
          this.$notify({
            title: '成功',
            message: '创建成功',
            type: 'success',
            duration: 2000
          })
        }
      })
    },
    addToParent(nodes, parentId, newNode) {
      for (let i = 0; i < nodes.length; i++) {
        const node = nodes[i]
        if (node.id === parentId) {
          if (!node.children) {
            this.$set(node, 'children', [])
          }
          node.children.push(newNode)
          return true
        }
        if (node.children && node.children.length > 0) {
          const isAdded = this.addToParent(node.children, parentId, newNode)
          if (isAdded) return true
        }
      }
      return false
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          // 模拟更新权限
          this.updateNode(this.list, this.temp)
          this.dialogFormVisible = false
          this.$notify({
            title: '成功',
            message: '更新成功',
            type: 'success',
            duration: 2000
          })
        }
      })
    },
    updateNode(nodes, updatedNode) {
      for (let i = 0; i < nodes.length; i++) {
        const node = nodes[i]
        if (node.id === updatedNode.id) {
          nodes.splice(i, 1, updatedNode)
          return true
        }
        if (node.children && node.children.length > 0) {
          const isUpdated = this.updateNode(node.children, updatedNode)
          if (isUpdated) return true
        }
      }
      return false
    },
    handleDelete(row) {
      this.$confirm('确定要删除该权限吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 模拟删除权限
        this.deleteNode(this.list, row.id)
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    deleteNode(nodes, id) {
      for (let i = 0; i < nodes.length; i++) {
        const node = nodes[i]
        if (node.id === id) {
          nodes.splice(i, 1)
          return true
        }
        if (node.children && node.children.length > 0) {
          const isDeleted = this.deleteNode(node.children, id)
          if (isDeleted) return true
        }
      }
      return false
    }
  }
}
</script>

<style scoped>
.filter-container {
  margin-bottom: 20px;
}
.filter-item {
  margin-right: 10px;
}
</style>